<template>
    <div class="details-box">
        <template v-if="!isChange">
            <div class="content-box">
                <div class="head-img">
                    <img :src="userInfo.userImg" alt="">
                </div>
                <div class="message-box">
                    <div class="user-name">
                        <img src="@/assets/img/user_icon.png" alt="">
                        {{userInfo.trueName}}
                    </div>
                    <div class="user-message">
                        <div>
                            <div><span>用户账号:</span>{{userInfo.mobile}}</div>
                            <div><span>证件类型:</span>{{userInfo.documentType}}</div>
                            <div><span>证件号码:</span>{{userInfo.userDocumentNumber}}</div>
                        </div>
                        <div>
                            <div><span>用户昵称:</span>{{userInfo.userNickname}}</div>
                            <div><span>真实姓名:</span>{{userInfo.trueName}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="change-btn"><el-button type="primary" @click="change()">修改</el-button></div>
        </template>
        <template v-else>
            <change-details :userInfo="userInfo" @sent-flag='getFlag'></change-details>
        </template>
    </div>
</template>

<script>
import changeDetails from './change-details';
export default {
    components:{
        changeDetails
    },
    name: 'personalDetails',
    props: {
    },
    data() {
        return {
            src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            isChange: false,
            userInfo: {}
        }
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        change() {
            this.isChange = true;
        },
        getFlag(e) {
            this.isChange = e;
            this.getUserInfo();
        },
        getUserInfo() {
            this.$ajax.getUserInfo({}).then((res)=> {
               this.userInfo = res.data
            //    console.log(this.userInfo)
            }).catch(err => {
                 this.$util.message(err.msg,'error')
            });
        }
    }
}
</script>

<style lang='scss'>
    .details-box {
        .content-box {
            display: flex;
        }
        .head-img {
            width: 128px;
            height: 180px;
            > img {
                width: 100%;
                height: 100%;
            }
        }
        .message-box {
            width: 70%;
            margin-left: 40px;
            color: #3C3C3C;
        }
        .user-name {
            font-size: 22px;
            img {
                width: 22px;
                height: 22px;
                vertical-align: middle;
                margin-right: 20px;
            }
        }
        .user-message {
            display: flex;
            > div {
                width: 50%;
                > div {
                    margin-top: 25px;
                    font-size: 14px;
                    > span {
                        color: #757575;
                        display: inline-block;
                        width: 80px;
                    }
                }
            }
        }
       
        .change-btn {
            text-align: center;
            margin-top: 95px;
        }
    }
</style>
